<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<li v-for="(list , index) in pages" :key="index" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<img :src="item.imgURL" />
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}<em>{{item.oldprice}}</em></p>
					</aside>
				</router-link>
			</li>
		</ol>
		<div class="jz">
			<router-link to="/">
				加载更多➡
			</router-link>
		</div>
	</div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);

	
export default{
	name:'CategoryTab1',
	data(){
		return{
			tab1List : [
				{id:1,imgURL:'imgs/tab1-1.jpg',title:'广州-丽江 7天跟团游',msg:'含往返飞机票+6晚住宿',price:3493,oldprice:3888},
				{id:2,imgURL:'imgs/tab1-2.jpg',title:'广州-稻城亚丁 5天跟团游',msg:'含往返飞机票+4晚住宿',price:5677,oldprice:5888},
				{id:3,imgURL:'imgs/tab1-3.jpg',title:'广州-三亚 5天跟团游',msg:'含往返飞机票(含税)+4晚住宿',price:2500,oldprice:2688},
				{id:4,imgURL:'imgs/tab1-4.jpg',title:'广州-桂林 9天跟团游',msg:'含单程飞机票单程火车票(含税)+8晚住宿',price:3493,oldprice:3888},
				{id:5,imgURL:'imgs/tab1-5.jpg',title:'广州-四川 5天跟团游',msg:'特惠立减！宿国际超5星洲际酒店丨峨眉+乐山+都江堰+熊猫乐园丨赠川剧变脸火锅',price:2320,oldprice:2660},
				{id:6,imgURL:'imgs/tab1-6.jpg',title:'广州-九寨沟 6天跟团游',msg:'自费成都+重庆麻辣双城记|峨眉山+乐山大佛+都江堰洪崖洞|船游夜览两江',price:2980,oldprice:3122},
				{id:7,imgURL:'imgs/tab1-7.jpg',title:'广州-张家界 4天跟团游',msg:'精致小团｜沱江泛舟｜纯玩一价全含｜高档酒店｜张家界玻璃桥天门山玻璃桥凤凰4日',price:2255,oldprice:2668},
				{id:8,imgURL:'imgs/tab1-8.jpg',title:'广州-银川 5天跟团游',msg:'塞上江南+大漠长河+千古绝唱+沙坡头+水洞沟+西夏王陵+北堡西部影城宁夏5日',price:3380,oldprice:4880},
			]
		}
	},
	computed:{
		// 程序将其当成是属性而不是函数，是个变量【循环/判断】
		pages(){
			let arr = [];	//空数组，目的是：重组一个二维数组
			let num = 4;	//每页条数
			// 将原数组便利
			this.tab1List.forEach( (item , index)=>{
				// i:每页的页码
				let i = Math.floor( index / num );
				// 将计算的页码放入新数组内，作为下标
				// 判断该下标已存在
				if(!arr[i]){
					// 第一次出现
					arr[i] = [];
					arr[i].push(item);
				}else{
					// 已经出现过直接添加
					arr[i].push(item);
				}
			} );
			return arr;
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.cate-tab1' , {
				//循环播放
				slidesPerView : 1
			} )
		} )
	}
}
</script>

<style scoped>
.cate-tab1{
	height: 9.2rem;
}
.cate-tab1 ol{
	width: 100%;
	height: 8rem;
}
.cate-tab1 ol li{
	float: left;
	width: 100%;
	height: 100%;
}
.cate-tab1 ol li a img{
	width: 90%;
	border-radius: 0.3rem;
	margin-top: 0.3rem;
	height: 60%;
}
.cate-tab1 ol li a{
	height: 50%;
	width: 50%;
	float: left;
	text-align: center;
	color: #000000;
	text-decoration: none;
}
.cate-tab1 ol li a:nth-child(even){
	height: 50%;
	width: 50%;
	float: right;
}
.cate-tab1 ol li a aside{
	text-align: left;
	text-indent: 1em;
	line-height: 0.35rem;
}
.cate-tab1 ol li a aside h3{
	margin-top: 0.1rem;
}
.cate-tab1 ol li a aside p{
	color: #ff8d2d;
	font-weight: bold;
	margin-top: 0.1rem;
}
.cate-tab1 ol li a aside p em{
	color: #cfcfcf;
	margin-left: 0.3rem;
	text-decoration: line-through;
}
.cate-tab1 ol li a aside label{
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	color: gray;
	margin-top: 0.1rem;
}

.jz{
	line-height: 1.2rem;
	text-align: center;
}
.jz a{
	margin-top: 0.2rem;
	display: block;
	width: 100%;
	border-radius: 0.4rem;
	border: 1px solid #dddddd;
	line-height: 0.8rem;
	background-color: #ffffff;
	text-decoration: none;
	color: #000000;
}
</style>
